import { useState } from 'react';
import CustomGrid, { LayoutEnum } from '../packages/Grid';
import PtzPanel from '../packages/ptzPanel';
function App() {
  const [selectedItem, setSelectedItem] = useState<number>(0);
  const [layout, setLayout] = useState<LayoutEnum>(LayoutEnum.OneColumn);
  const onChangeLayout = (index: number) => {
    setLayout(index)
    setSelectedItem(0)
  }
  return (
    <div className="App">
      <h1>Media Grid Demo</h1>
      <div>Current selected：{selectedItem}</div>
      <div><PtzPanel  onCancel={()=>{}} onStart={()=>{}} onEnd ={()=>{}} onZoom ={()=>{}} initPosition = {{top:0,bottom:0,right:0}}/></div>
      <div>
        grid number:
        {Object.keys(LayoutEnum)
          .filter(key => isNaN(Number(key)) === false) // 过滤掉非数值的键
          .map(key => <button key={key}  onClick={()=>{onChangeLayout(Number(key))}}>{key}</button>)}
      </div>
      <div>

      </div>
      <div>
        <CustomGrid
          layout={layout} // 1,4,9,13,16
          gap={0}//间隙值
          draggable
          itemStyle={{ border: '1px solid #ccc', width: 300, height: 200 }} // 自定义每个小宫格的样式
          gridContainerStyle={{ margin: '20px', justifyContent: 'center' }} // 自定义整体宫格的样式
          selectedItem={selectedItem} // 设置当前选中的id
          onSelect={id => setSelectedItem(id)} // 处理选中事件
          selectBgColor='gray'
          renderChildNode={(index => {
            return <div>窗口索引：{index}</div>
          })}
        />
      </div>
    </div>
  );
}

export default App;
